<script type="text/javascript">
    function hoverup(id){
        document.getElementById(id).style.marginTop="4px";
        document.getElementById(id).src="images/menu-"+id+"-green.png";
    }
    function hoverdown(id){
        document.getElementById(id).style.marginTop="0px";
        document.getElementById(id).src="images/"+id+".png";
    }

</script>

<div id="menu" style="margin-left: 23px;">
    <div class="menu-item" style="">
        <div style="position: absolute; " onmouseover="hoverup('inicio');" onmouseout="hoverdown('inicio');">
            <a href="../index.php"><img src="images/<?php if($menu=="index"){?>menu-inicio-green.png<?php }else{ ?>inicio.png<?php } ?>" id="inicio" width="82"/></a>
        </div>
    </div>
    <div class="menu-item">
        <div style="position: absolute; margin-left: 82px;" onmouseover="hoverup('local');" onmouseout="hoverdown('local')">
            <a href="../local.php"><img src="images/<?php if($menu=="local"){?>menu-local-green.png<?php }else{ ?>local.png<?php } ?>" id="local" width="82"/></a>
        </div>
    </div>
    <div class="menu-item">
        <div style="position: absolute; margin-left: 164px;" onmouseover="hoverup('espectaculos');" onmouseout="hoverdown('espectaculos')">
            <a href="../espectaculos.php"><img src="images/<?php if($menu=="espectaculos"){?>menu-espectaculos-green.png<?php }else{ ?>espectaculos.png<?php } ?>" id="espectaculos" width="82"/></a>
        </div>
    </div>
    <div class="menu-item">
        <div style="position: absolute; margin-left: 245px;" onmouseover="hoverup('cultura');" onmouseout="hoverdown('cultura')">
            <a href="../cultura.php"><img src="images/<?php if($menu=="cultura"){?>menu-cultura-green.png<?php }else{ ?>cultura.png<?php } ?>" id="cultura" width="82"/></a>
        </div>
    </div>
    <div class="menu-item">
        <div style="position: absolute; margin-left: 327px;" onmouseover="hoverup('sociales');" onmouseout="hoverdown('sociales')">
            <a href="../sociales.php"><img src="images/<?php if($menu=="sociales"){?>menu-sociales-green.png<?php }else{ ?>sociales.png<?php } ?>" id="sociales" width="82"/></a>
        </div>
    </div>
    <div class="menu-item">
        <div style="position: absolute; margin-left: 408px;" onmouseover="hoverup('deportes');" onmouseout="hoverdown('deportes')">
            <a href="../deportes.php"><img src="images/<?php if($menu=="deportes"){?>menu-deportes-green.png<?php }else{ ?>deportes.png<?php } ?>" id="deportes" width="82"/></a>
        </div>
    </div>
    <div class="menu-item">
        <div style="position: absolute; margin-left: 489px" onmouseover="hoverup('tecnologia');" onmouseout="hoverdown('tecnologia')">
            <a href="../tecnologia.php"><img src="images/<?php if($menu=="tecnologia"){?>menu-tecnologia-green.png<?php }else{ ?>tecnologia.png<?php } ?>" id="tecnologia" width="82"/></a>
        </div>
    </div>
    <div class="menu-item">
        <div style="position: absolute; margin-left: 569px;" onmouseover="hoverup('politica');" onmouseout="hoverdown('politica')">
            <a href="politica.php"><img src="images/<?php if($menu=="politica"){?>menu-politica-green.png<?php }else{ ?>politica.png<?php } ?>" id="politica" width="82"/></a>
        </div>
    </div>
    <div class="menu-item">
        <div style="position: absolute; margin-left: 651px;" onmouseover="hoverup('economia');" onmouseout="hoverdown('economia')">
            <a href="../economia.php"><img src="images/<?php if($menu=="economia"){?>menu-economia-green.png<?php }else{ ?>economia.png<?php } ?>" id="economia" width="82"/></a>
        </div>
    </div>
    <div class="menu-item">
        <div style="position: absolute; margin-left: 733px" onmouseover="hoverup('turismo');" onmouseout="hoverdown('turismo')">
            <a href="../turismo.php"><img src="images/<?php if($menu=="turismo"){?>menu-turismo-green.png<?php }else{ ?>turismo.png<?php } ?>" id="turismo" width="82"/></a>
        </div>
    </div>
    <div class="menu-item">
        <div style="position: absolute; margin-left: 815px" onmouseover="hoverup('nacional');" onmouseout="hoverdown('nacional')">
            <a href="../nacional.php"><img src="images/<?php if($menu=="nacional"){?>menu-nacional-green.png<?php }else{ ?>nacional.png<?php } ?>" id="nacional" width="82"/></a>
        </div>
    </div>
    <div class="menu-item">
        <div style="position: absolute; margin-left: 897px" onmouseover="hoverup('internacional');" onmouseout="hoverdown('internacional')">
            <a href="../internacional.php"><img src="images/<?php if($menu=="internacional"){?>menu-internacional-green.png<?php }else{ ?>internacional.png<?php } ?>" id="internacional" width="82"/></a>
        </div>
    </div>
</div>